<template>
  <div class="about">
    <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display:contents;">
      <el-form-item>
        <el-input v-model="formInline.username" placeholder="输入用户名或昵称查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据展示区域 -->
    <el-table v-loading="loading" :data="tableData" style="width: 70%">
      <el-table-column prop="username" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="180">
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="180" :formatter="formatDate">
      </el-table-column>
      <el-table-column label="操作" width="120">
        <!-- scope为当前行的数据 -->
        <template slot-scope="scope">
          &nbsp;
          <el-popconfirm @confirm="deleteUser(scope.row.id)" title="确定删除吗？">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>



    <!-- 分页组件 -->
    <el-pagination @current-change="handlePageChange" @size-change="handlePageSizeChange" :current-page="currentPage" :page-sizes="pageSizes"
      :page-size="pageSize" :total="total" layout="total,prev, pager, next, jumper,sizes"></el-pagination>

  </div>
</template>
  
<script>
import manageApi from '@/api/manageApi';
import dataApi from '@/api/dataApi';
import userApi from '@/api/userApi';
export default {
  name: 'userView',
  data() {
    return {
      tableData: [], //存储从后端获取的数据
      currentPage: 1, // 当前页码
      pageSize: 10,   // 每页显示的数据量
      pageSizes:[10, 20, 30, 40], //分页
      total: 0,        // 总数据量
      loading:true,
      formInline:{
        username:"",
      }
    }
  },
  methods: {
    //获得数据
    getData() {
      this.loading =true;
      dataApi.userData({
        params: {
          page: this.currentPage-1,
          size: this.pageSize,
        }
      })
        .then(response => {
          if(response.totalElements!==this.total && this.total!==0){
            this.onSubmit();
          }else{
            this.tableData = response.content;
            this.total = response.totalElements;
          }
          this.loading = false;
        })
        .catch(error => {
          console.error('Failed to fetch data:', error);
        });
      
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.getData(); // 切换页码时重新获取数据
    },
    //更换页面条数时执行
    handlePageSizeChange(pagesize){
      this.pageSize = pagesize;
      this.getData();
    },
    onSubmit() {
      this.loading = true;
      manageApi.getUserOrNick({
        username: this.formInline.username,  //查询的内容
        page: this.currentPage - 1,  //查询的页数
        size: this.pageSize,  //查询的条数
      }).then(response => {
        this.tableData = response.data.content;   //将结果赋给表单
        this.total = response.data.totalElements; //获得总条数
        this.loading = false
      })
    },
    deleteUser(id){
      userApi.deleteUser({id:id}).then(response=>{
        if(response.data){
          this.$message({
            message:"删除成功",
            type:"success"
          })
          this.getData()
        }
      })
    },
    formatDate(row) {
      // 获取单元格数据
      let datac = row.birthday
      let dtc = new Date(datac)
      //获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1
      //获取日
      let dtuDay = dtc.getDate()
      //处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = "0" + (dtc.getMonth() + 1)
      }
      //处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = "0" + dtc.getDate()
      }
      //获取小时
      let dtuHours = dtc.getHours()
      //处理1-9时前面加0
      if (dtuHours < 10) {
        dtuHours = "0" + dtc.getHours()
      }
      //获取分钟
      let dtuMinutes = dtc.getMinutes()
      //处理1-9分前面加0
      if (dtuMinutes < 10) {
        dtuMinutes = "0" + dtc.getMinutes()
      }
      //获取秒
      let dtuSeconds = dtc.getSeconds()
      //处理1-9秒前面加0
      if (dtuSeconds < 10) {
        dtuSeconds = "0" + dtc.getSeconds()
      }
      //组装年月日时分秒,按自己的要求来
      return dtc.getFullYear() + "/" + dtuMonth + "/" + dtuDay
      // + " " + dtuHours + ":" + dtuMinutes + ":" + dtuSeconds
    },
  },
  mounted() {
    this.getData();
  }
}
</script>